<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行内元素</title>
</head>
<body>
  <h1>块分区元素</h1>
  <!--块分区元素的作用：用于页面中的布局效果，特点：单独成行-->
  <div id="auto">
      大家好，我叫王志刚，今年23岁
  </div>

  <div id="news">
      欢迎咨询启点教育
  </div>

  <h1>行分区元素</h1>
    <!--没有特殊样式，给一行中不同元素进行不同样式设置-->
  <span id="s1">床前明月光</span><span id="s2">疑是地上霜</span><span>举头望明月</span><span>低头思故乡</span>

    <!--块级元素
        常见的块级元素：h1-h6  p   div
        特点：
            每一个元素独占一行
            从上往下依次排列
       作用：页面布局
    -->
    <!--行内元素
        常见的行内元素  span  i  u   sub   sup   b  s
        在一行内允许存在多个元素
        从左往右依次排列
        作用：同一行元素设置不同样式
    -->
</body>
</html>